<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 发布预约</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen pb-20">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-4 text-white flex items-center">
            <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
            <div class="ml-3 flex-1 text-lg font-medium">发布预约需求</div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-16 px-4">
        <!-- 表单区域 -->
        <div class="bg-white rounded-xl shadow-sm mt-4 overflow-hidden">
            <!-- 服务类型选择 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">服务类型</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">舞蹈</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">健身</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">瑜伽</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">疗愈</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">高尔夫</button>
                </div>
            </div>
            
            <!-- 服务项目选择 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">服务项目</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">拉丁舞</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">爵士舞</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">街舞</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">民族舞</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">芭蕾</button>
                </div>
            </div>
            
            <!-- 预约时间 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">预约时间</h3>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fa-regular fa-calendar mr-2 text-primary-dark"></i>
                        <input type="date" class="border-0 focus:outline-none text-sm" value="2023-06-15">
                    </div>
                    <div class="flex items-center">
                        <i class="fa-regular fa-clock mr-2 text-primary-dark"></i>
                        <input type="time" class="border-0 focus:outline-none text-sm" value="14:00">
                    </div>
                </div>
            </div>
            
            <!-- 课程时长 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">课程时长</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">30分钟</button>
                    <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">60分钟</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">90分钟</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">120分钟</button>
                </div>
            </div>
            
            <!-- 上课地点 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">上课地点</h3>
                <div class="flex flex-wrap gap-2 mb-3">
                    <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">线下场地</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">线上远程</button>
                    <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">上门服务</button>
                </div>
                <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                    <div class="flex items-center">
                        <i class="fa-solid fa-location-dot text-primary-dark mr-2"></i>
                        <span class="text-sm">朝阳区望京SOHO T1</span>
                    </div>
                    <button class="text-primary-dark text-sm">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 价格预算 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-sm text-gray-500 mb-2">价格预算</h3>
                <div class="flex items-center">
                    <span class="text-lg mr-2">¥</span>
                    <input type="number" placeholder="输入您的预算金额" class="flex-1 border-0 focus:outline-none text-lg" value="200">
                    <span class="text-sm text-gray-500">/小时</span>
                </div>
            </div>
            
            <!-- 需求描述 -->
            <div class="p-4">
                <h3 class="text-sm text-gray-500 mb-2">需求描述</h3>
                <textarea placeholder="请详细描述您的需求，如经验要求、特殊需求等..." class="w-full h-24 p-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-primary-light"></textarea>
            </div>
        </div>
        
        <!-- 教练偏好 -->
        <div class="bg-white rounded-xl shadow-sm mt-4 p-4">
            <h3 class="font-medium mb-3">教练偏好</h3>
            <div class="flex flex-wrap gap-2 mb-3">
                <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">不限</button>
                <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">3年以上经验</button>
                <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">5年以上经验</button>
            </div>
            <div class="flex flex-wrap gap-2">
                <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">不限</button>
                <button class="px-4 py-2 rounded-full border border-gray-200 text-gray-500 text-sm">男教练</button>
                <button class="px-4 py-2 rounded-full bg-primary-dark text-white text-sm">女教练</button>
            </div>
        </div>
        
        <!-- 隐私设置 -->
        <div class="bg-white rounded-xl shadow-sm mt-4 p-4">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="font-medium">隐私发布</h3>
                    <p class="text-xs text-gray-500 mt-1">开启后仅平台认证教练可见</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer" checked>
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></div>
                </label>
            </div>
        </div>
    </main>
    
    <!-- 底部提交栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 z-20 max-w-md mx-auto">
        <button class="w-full py-3 gradient-bg rounded-full text-white font-medium">
            发布预约需求
        </button>
    </div>
</body>
</html> 